<template>
  <div>
    <el-form
      class="app-container"
      ref="elForm"
      :model="logList"
      size="medium"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="证件类型:" prop="type">
        <el-select
          v-model="logList.idtype"
          placeholder="请选择状态"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in field101Options"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名:" prop="name">
        <el-input
          v-model="logList.name"
          placeholder="请输入用姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号:" prop="handset">
        <el-input
          v-model="logList.handset"
          placeholder="请输入手机号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label>
        <el-button
          type="primary"
          size="medium"
          v-hasPermi="['userManagement:multipleUser:query']"
          @click="search"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 95%; margin: auto"
      :header-cell-style="{ background: '#f7f7f7' }"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"
      ></el-table-column>
      <el-table-column label="证件类型" prop="idtype" align="center">
        <template slot-scope="scope">
          <p v-if="tableData[scope.$index].idtype == 1">身份证</p>
          <p v-if="tableData[scope.$index].idtype == 2">回乡证</p>
          <p v-if="tableData[scope.$index].idtype == 3">护照</p>
          <p v-if="tableData[scope.$index].idtype == 4">台胞证</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="cardid"
        label="证件号码"
        align="center"
      ></el-table-column>

      <el-table-column prop="sex" label="性别" align="center"></el-table-column>
      <el-table-column prop="birthday" label="出生日期" align="center">
        <template slot-scope="scope">{{
          newDate(scope.row.birthday)
        }}</template>
      </el-table-column>
      <el-table-column
        prop="handset"
        label="手机号码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="accountNumber"
        label="所属账号"
        align="center"
      ></el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      class="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="logList.pageNum"
      :limit.sync="logList.pageSize"
      @pagination="getSuggestion()"
    />
  </div>
</template>

<script>
import { list, resetPwd } from "@/api/userManagement/multipleUser";
import utils from "../../js/index";
export default {
  name: "MultipleUser",
  components: {},
  props: [],
  data() {
    return {
      // 用户列表
      tableData: [],
      // 重置按钮框
      dialogVisible: false,
      // 数据总条数
      total: 0,
      // 加载中
      loading: true,
      field101Options: [
        {
          label: "身份证",
          value: 1
        },
        {
          label: "回乡证",
          value: 2
        },
        {
          label: "护照",
          value: 3
        },
        {
          label: "台胞证",
          value: 4
        }
      ],
      // 查询列表传递的参数
      logList: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        handset: "",
        idtype: ""
      }
    };
  },
  computed: {},
  created() {
    this.getSuggestion();
  },
  mounted() {},
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.logList.page = val;
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // 用户列表
    getSuggestion() {
      list(this.logList).then(response => {
        if (response.code == 200) {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      });
    },
    // 搜索按钮
    search() {
      list(this.logList).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
      });
    },
    // 日期格式化
    newDate(date) {
      return utils.utils.NewDate(date);
    }
  }
};
</script>

<style>
.pagination {
  margin-top: 2%;
  margin-bottom: 2%;
}
.one-txt-cut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
